<template>
  <div class="error-page">
    <error-content
      v-if="error.statusCode === 401"
      code="401"
      desc="Oh~~您没有浏览这个页面的权限~"
      :src="error401"
    ></error-content>
    <error-content
      v-if="error.statusCode === 404"
      code="404"
      desc="Oh~~您的页面好像飞走了~"
      :src="error404"
    ></error-content>
    <error-content
      v-if="error.statusCode === 500"
      code="500"
      desc="Oh~~鬼知道服务器经历了什么~"
      :src="error500"
    ></error-content>
  </div>
</template>

<style scoped>
.error-page {
  width: 100vw;
  height: 100vh;
}
</style>

<script>
import error401 from '@/assets/images/error-page/error-401.svg'
import error404 from '@/assets/images/error-page/error-404.svg'
import error500 from '@/assets/images/error-page/error-500.svg'
import errorContent from './error-page/error-content'

export default {
  name: 'Error',

  layout: 'normal',

  components: {
    errorContent
  },

  filters: {},

  props: {
    error: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  data() {
    return {
      error401,
      error404,
      error500
    }
  },

  computed: {},

  watch: {},

  mounted() {},

  methods: {}
}
</script>
